Frontend-suorituskyvyn hallinta: Syväsukellus User Timing API:hin

Nykypäivän digitaalisessa maailmassa frontend-suorituskyky ei ole ylellisyyttä; se on menestyksen perusedellytys. Maailmanlaajuiselle yleisölle hidas ja reagoimaton verkkosivusto voi johtaa käyttäjien turhautumiseen, heikentyneeseen sitoutumiseen ja suoraan negatiiviseen vaikutukseen liiketoiminnan tuloksiin. Meillä on erinomaisia standardoituja mittareita, kuten Core Web Vitals (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift), jotka antavat meille perustason ymmärryksen käyttäjäkokemuksesta. Nämä mittarit, vaikka ne ovatkin ratkaisevia, kertovat kuitenkin vain osan tarinasta.

Entä sovelluskohtaisten ominaisuuksien suorituskyky? Kuinka kauan kestää, että hakutulokset ilmestyvät käyttäjän kirjoitettua kyselyn? Kuinka paljon aikaa monimutkaisen datan visualisointikomponenttisi renderöintiin kuluu datan vastaanottamisen jälkeen API:sta? Miten uusi ominaisuus vaikuttaa yksisivuisen sovelluksesi (SPA) reitinvaihtojen nopeuteen? Standardimittarit eivät voi vastata näihin yksityiskohtaisiin, liiketoiminnan kannalta kriittisiin kysymyksiin. Tässä kohtaa User Timing API astuu kuvaan, antaen kehittäjille mahdollisuuden luoda räätälöityjä, erittäin tarkkoja suorituskykymittauksia, jotka on sovitettu heidän omiin ainutlaatuisiin sovelluksiinsa.

Tämä kattava opas johdattaa sinut läpi kaiken, mitä sinun tarvitsee tietää User Timing API:n hyödyntämiseksi, peruskäsitteistä kuten merkinnöistä ja mittauksista aina edistyneisiin tekniikoihin, jotka käyttävät PerformanceObserveria. Tämän oppaan jälkeen olet valmis ylittämään yleiset mittarit ja aloittamaan sovelluksesi ainutlaatuisen suorituskykytarinan kertomisen.

Mikä on Performance API? Laajempi konteksti

Ennen kuin syvennymme User Timingiin, on tärkeää ymmärtää, että se on osa laajempaa työkalupakettia, joka tunnetaan yhteisnimellä Performance API. Tämä selainrajapinta tarjoaa pääsyn erittäin tarkkaan ajoitusdataan liittyen navigointiin, resurssien lataamiseen ja muuhun. Globaali `window.performance`-objekti on pääsypisteesi tähän tehokkaaseen työkalupakkiin.

Performance API koostuu useista rajapinnoista, mukaan lukien:

• Navigation Timing: Tarjoaa yksityiskohtaista ajoitustietoa dokumentin navigointiprosessista, kuten DNS-hakuihin, TCP-kättelyihin ja ensimmäisen tavun vastaanottamiseen käytetty aika.
• Resource Timing: Tarjoaa yksityiskohtaista verkon ajoitusdataa jokaisesta sivun lataamasta resurssista, mukaan lukien kuvat, skriptit ja CSS-tiedostot.
• Paint Timing: Paljastaa First Paintin ja First Contentful Paintin ajoitukset.
• User Timing: Artikkelimme keskipiste, joka antaa kehittäjille mahdollisuuden luoda omia mukautettuja aikaleimoja (marks) ja mitata niiden välistä kestoa (measures).

Nämä API:t toimivat yhdessä tarjotakseen kokonaisvaltaisen kuvan sovelluksesi suorituskyvystä. Tavoitteenamme tänään on hallita User Timing -osaa, joka antaa meille vallan lisätä omia mukautettuja tarkistuspisteitämme tälle suorituskykyajanajalle.

Ydinkäsitteet: Merkinnät ja mittaukset

User Timing API on petollisen yksinkertainen, ja se pyörii kahden peruskäsitteen ympärillä: merkintöjen (marks) ja mittausten (measures). Ajattele sitä kuin sekuntikellon käyttöä. Painat nappia merkitäksesi alkamisajan ja painat sitä uudelleen merkitäksesi päättymisajan. Näiden kahden painalluksen välinen kesto on mittauksesi.

Suorituskykymerkintöjen luominen: `performance.mark()`

"Merkintä" (mark) on nimetty, korkean resoluution aikaleima, joka tallennetaan tietyssä kohdassa sovelluksesi suoritusta. Se on kuin lipun istuttaminen suorituskykyajanajallesi. Voit luoda niin monta merkintää kuin tarvitset tunnistaaksesi avainhetkiä käyttäjäpolussa tai komponentin elinkaaressa.

Syntaksi on suoraviivainen:

performance.mark(markName, [markOptions]);

• markName: Merkkijono, joka on merkintäsi yksilöllinen nimi. Valitse kuvailevia nimiä!
• markOptions (valinnainen): Objekti, joka voi sisältää detail-ominaisuuden ylimääräisen metadatan liittämiseksi ja startTime-ominaisuuden mukautetun aikaleiman määrittämiseksi.

Perusesimerkki: Tapahtuman merkitseminen

Oletetaan, että haluamme merkitä tärkeän funktiokutsun alun.

            
function processLargeDataset() {
  // Aseta merkintä juuri ennen raskaan työn alkua
  performance.mark('processLargeDataset:start');

  // ... raskas laskentalogiikka ...

  console.log('Dataset processing complete.');

  // Aseta toinen merkintä, kun työ on valmis
  performance.mark('processLargeDataset:end');
}

processLargeDataset();

            

              
                Copy
              
            
          

Tässä esimerkissä olemme luoneet kaksi aikaleimaa selaimen suorituskykyajanajalle: `processLargeDataset:start` ja `processLargeDataset:end`. Tällä hetkellä ne ovat vain pisteitä ajassa. Niiden todellinen voima paljastuu, kun käytämme niitä mittauksen luomiseen.

Kontekstin lisääminen `detail`-ominaisuudella

Joskus pelkkä aikaleima ei riitä. Saatat haluta sisällyttää ylimääräistä kontekstia siitä, mitä sillä hetkellä tapahtui. `detail`-ominaisuus on täydellinen tähän. Se voi sisältää mitä tahansa dataa, joka on rakenteellisesti kloonattavissa (kuten objekteja, taulukoita, merkkijonoja, numeroita).

Kuvitellaan, että merkitsemme komponentin renderöinnin alkua ja haluamme tietää, kuinka monta kohdetta se renderöi.

            
function renderProductList(products) {
  const itemCount = products.length;

  performance.mark('ProductList:render:start', {
    detail: {
      itemCount: itemCount,
      source: 'initial-load'
    }
  });

  // ... komponentin renderöintilogiikka ...

  performance.mark('ProductList:render:end');
}

const sampleProducts = new Array(1000).fill(0);
renderProductList(sampleProducts);

            

              
                Copy
              
            
          

Tämä lisäkonteksti on korvaamatonta, kun analysoidaan suorituskykydataa myöhemmin. Voit esimerkiksi korreloida renderöintiaikoja kohteiden määrän kanssa nähdäksesi, onko suhde lineaarinen vai eksponentiaalinen.

Suorituskykymittausten luominen: `performance.measure()`

"Mittaus" (measure) tallentaa keston kahden ajanhetken välillä. Se on laskelma, joka kertoo sinulle, "kuinka kauan" jokin kesti. Yleisimmin mittaat ajan kahden mukautetun merkintäsi välillä.

Syntaksissa on muutama muunnelma:

performance.measure(measureName, startMarkOrOptions, [endMark]);

• measureName: Merkkijono, joka on mittauksesi yksilöllinen nimi.
• startMarkOrOptions (valinnainen): Merkkijono, joka sisältää aloitusmerkinnän nimen. Voi olla myös asetusobjekti, jossa on `start`, `end`, `duration` ja `detail`.
• endMark (valinnainen): Merkkijono, joka sisältää lopetusmerkinnän nimen.

Perusesimerkki: Funktion keston mittaaminen

Rakennetaan `processLargeDataset`-esimerkkimme päälle ja mitataan, kuinka kauan se todella kesti.

            
function processLargeDataset() {
  performance.mark('processLargeDataset:start');

  // ... raskas laskentalogiikka ...

  performance.mark('processLargeDataset:end');

  // Nyt luodaan mittaus
  performance.measure(
    'processLargeDataset:duration',
    'processLargeDataset:start',
    'processLargeDataset:end'
  );
}

processLargeDataset();

            

              
                Copy
              
            
          

Kun tämä koodi on suoritettu, selaimen suorituskykypuskuri sisältää uuden tietueen nimeltä `processLargeDataset:duration`. Tällä tietueella on `duration`-ominaisuus, joka sisältää tarkan ajan millisekunteina, joka kului alku- ja loppumerkintöjen välillä.

Edistyneet mittausskenaariot

`measure()`-metodi on erittäin joustava. Sinun ei aina tarvitse antaa kahta merkintää.

• Navigoinnin alusta merkintään: Voit mitata ajan sivun navigoinnin alusta yhteen mukautetuista merkinnöistäsi. Tämä on uskomattoman hyödyllistä mitattaessa esimerkiksi "Aika interaktiiviseen komponenttiin".

              
    // Mittaa navigoinnin alusta, kunnes pääkomponentti on valmis
    performance.measure('timeToInteractiveHeader', 'navigationStart', 'headerComponent:ready');
    
              
  
                
                  Copy
                
              
            

• Merkinnästä nykyhetkeen: Jos jätät `endMark`-parametrin pois, mittaus lasketaan `startMark`-merkinnästäsi nykyhetkeen.

              
    // Mittaa aloitusmerkinnästä siihen hetkeen, kun tämä koodirivi suoritetaan
    performance.measure('timeSinceDataRequest', 'api:fetch:start');
    
              
  
                
                  Copy
                
              
            

• Asetusobjektin käyttäminen: Voit myös välittää konfiguraatio-objektin mittauksen määrittämiseksi, mikä on hyödyllistä `detail`-ominaisuuden lisäämisessä.

              
    performance.measure('complexRender:duration', {
      start: 'complexRender:start',
      end: 'complexRender:end',
      detail: { renderType: 'canvas' }
    });
    
              
  
                
                  Copy
                
              
            

Suorituskykytietueiden käyttäminen ja tyhjentäminen

Merkintöjen ja mittausten luominen on vain puolet taistelusta. Tarvitset tavan hakea tämä data analysoitavaksi. `performance`-objekti tarjoaa tähän useita metodeja.

• performance.getEntries(): Palauttaa taulukon kaikista suorituskykytietueista puskurissa (mukaan lukien resurssien ajoitukset, navigoinnin ajoitukset jne.).
• performance.getEntriesByType(type): Palauttaa taulukon tietyn tyyppisistä tietueista. Useimmiten käytät `performance.getEntriesByType('mark')` ja `performance.getEntriesByType('measure')`.
• performance.getEntriesByName(name, [type]): Palauttaa taulukon tietueista, joilla on tietty nimi (ja valinnaisesti tietty tyyppi).

Esimerkki: Mittausten kirjaaminen konsoliin

            
// Aiempien esimerkkien suorittamisen jälkeen...

const allMeasures = performance.getEntriesByType('measure');
console.log(allMeasures);

// Mittaustietueobjekti näyttää suunnilleen tältä:
// {
//   "name": "processLargeDataset:duration",
//   "entryType": "measure",
//   "startTime": 12345.67,
//   "duration": 150.89
// }

const specificMeasure = performance.getEntriesByName('processLargeDataset:duration');
console.log(`Käsittely kesti: ${specificMeasure[0].duration}ms`);

            

              
                Copy
              
            
          

Tärkeää: Suorituskykypuskurin siivoaminen

Selaimen suorituskykypuskuri ei ole ääretön. Muistivuotojen estämiseksi ja mittausten pitämiseksi relevantteina on parasta käytäntöä tyhjentää luomasi merkinnät ja mittaukset, kun olet valmis niiden kanssa.

• performance.clearMarks([name]): Tyhjentää kaikki merkinnät tai vain ne merkinnät, joilla on määritetty nimi.
• performance.clearMeasures([name]): Tyhjentää kaikki mittaukset tai vain ne mittaukset, joilla on määritetty nimi.

Yleinen malli on hakea data, käsitellä tai lähettää se ja sitten tyhjentää se.

            
function analyzeAndClear() {
  const myMeasures = performance.getEntriesByName('processLargeDataset:duration');
  // Lähetä myMeasures analytiikkapalveluun...
  sendToAnalytics(myMeasures);

  // Siivoa muistin vapauttamiseksi
  performance.clearMarks('processLargeDataset:start');
  performance.clearMarks('processLargeDataset:end');
  performance.clearMeasures('processLargeDataset:duration');
}

            

              
                Copy
              
            
          

Käytännön esimerkkejä User Timingin käytöstä

Nyt kun ymmärrämme mekaniikan, tutkitaan, kuinka User Timing API:ta voidaan soveltaa todellisten suorituskykyhaasteiden ratkaisemiseen. Nämä esimerkit ovat riippumattomia viitekehyksistä ja ne voidaan mukauttaa mihin tahansa frontend-pinoon.

1. API-kutsujen keston mittaaminen

On kriittistä ymmärtää, kuinka kauan sovelluksesi odottaa dataa. Voit helposti kääriä datanhakulogiikkasi merkintöihin ja mittauksiin.

            
async function fetchUserData(userId) {
  const markStart = `api:getUser:${userId}:start`;
  const markEnd = `api:getUser:${userId}:end`;
  const measureName = `api:getUser:${userId}:duration`;

  performance.mark(markStart);

  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      throw new Error('Verkkovastaus ei ollut kunnossa');
    }
    return await response.json();
  } catch (error) {
    console.error('Fetch-virhe:', error);
    // Voit jopa lisätä tietoja virheistä!
    performance.mark(markEnd, { detail: { status: 'error', message: error.message } });
  } finally {
    // Varmista, että loppumerkintä ja mittaus luodaan aina
    if (performance.getEntriesByName(markEnd).length === 0) {
        performance.mark(markEnd, { detail: { status: 'success' } });
    }
    performance.measure(measureName, markStart, markEnd);
  }
}

fetchUserData('123');

            

              
                Copy
              
            
          

Tämä malli tarjoaa tarkat ajoitukset jokaiselle API-kutsulle, mikä mahdollistaa hitaiden päätepisteiden tunnistamisen suoraan oikeilta käyttäjiltä saadusta datasta.

2. Komponenttien renderöintiaikojen seuranta SPA-sovelluksissa

Reactin, Vuen tai Angularin kaltaisissa viitekehyksissä komponentin asentumiseen ja renderöintiin kuluvan ajan mittaaminen on ensisijainen käyttötapaus. Tämä auttaa tunnistamaan monimutkaisia komponentteja, jotka saattavat hidastaa sovellustasi.

Esimerkki React Hookeilla:

            
import React, { useLayoutEffect, useEffect, useRef } from 'react';

function MyHeavyComponent({ data }) {
  const componentId = useRef(`MyHeavyComponent-${Math.random()}`).current;
  const markStartName = `${componentId}:render:start`;
  const markEndName = `${componentId}:render:end`;
  const measureName = `${componentId}:render:duration`;

  // useLayoutEffect suoritetaan synkronisesti kaikkien DOM-mutaatioiden jälkeen.
  // Se on täydellinen paikka merkitä renderöintimittauksen alku.
  useLayoutEffect(() => {
    performance.mark(markStartName);
  }, []); // Suorita vain ensimmäisellä asennuksella

  // useEffect suoritetaan asynkronisesti, kun renderöinti on tehty näytölle.
  // Tämä on hyvä paikka merkitä loppu.
  useEffect(() => {
    performance.mark(markEndName);
    performance.measure(measureName, markStartName, markEndName);

    // Kirjaa tulos demonstrointia varten
    const measure = performance.getEntriesByName(measureName)[0];
    if (measure) {
      console.log(`${measureName} kesti ${measure.duration}ms`);
    }

    // Siivous
    performance.clearMarks(markStartName);
    performance.clearMarks(markEndName);
    performance.clearMeasures(measureName);
  }, []); // Suorita vain ensimmäisellä asennuksella

  return (
    // ... JSX raskaalle komponentille ...
  );
}

            

              
                Copy
              
            
          

3. Kriittisten käyttäjäpolkujen kvantifiointi

User Timingin vaikuttavin käyttö on mitata monivaiheisia käyttäjäinteraktioita, jotka ovat kriittisiä liiketoiminnallesi. Tämä ylittää yksinkertaiset tekniset mittarit ja mittaa sovelluksesi ydintoimintojen koettua nopeutta.

Harkitse verkkokaupan kassaprosessia:

            
const checkoutButton = document.getElementById('checkout-btn');

checkoutButton.addEventListener('click', () => {
  // 1. Käyttäjä klikkaa 'kassalle'-nappia
  performance.mark('checkout:journey:start');

  // ... koodi ostoskorin validointiin, maksusivulle siirtymiseen jne. ...
});

// Maksusivulla, kun maksulomake on renderöity ja interaktiivinen
function onPaymentFormReady() {
  performance.mark('checkout:paymentForm:ready');
  performance.measure('checkout:timeToPaymentForm', 'checkout:journey:start', 'checkout:paymentForm:ready');
}

// Kun maksu on käsitelty onnistuneesti ja vahvistusnäyttö näytetään
function onPaymentSuccess() {
  performance.mark('checkout:journey:end');
  performance.measure('checkout:totalJourney:duration', 'checkout:journey:start', 'checkout:journey:end');

  // Nyt sinulla on kaksi tehokasta mittaria analysoitavaksi ja optimoitavaksi.
}

            

              
                Copy
              
            
          

4. Suorituskykyparannusten A/B-testaus

Kun uudelleenkirjoitat koodinpätkän tai otat käyttöön uuden algoritmin, miten todistat sen olevan todella nopeampi oikeille käyttäjille? User Timing tarjoaa objektiivista dataa A/B-testaukseen.

Kuvittele, että sinulla on kaksi erilaista lajittelualgoritmia, joita haluat testata:

            
function sortProducts(products, algorithmVersion) {
  const markStart = `sort:v${algorithmVersion}:start`;
  const markEnd = `sort:v${algorithmVersion}:end`;
  const measureName = `sort:v${algorithmVersion}:duration`;

  performance.mark(markStart);

  if (algorithmVersion === 'A') {
    // ... suorita vanha lajittelualgoritmi ...
  } else {
    // ... suorita uusi, optimoitu lajittelualgoritmi ...
  }

  performance.mark(markEnd);
  performance.measure(measureName, markStart, markEnd);
}

// A/B-testauslipun perusteella kutsuisit jompaakumpaa.
// Myöhemmin analytiikassasi voit verrata keskimääräistä kestoa
// 'sort:vA:duration' vs. 'sort:vB:duration' nähdäksesi, kumpi oli nopeampi.

            

              
                Copy
              
            
          

Mukautettujen mittareiden visualisointi ja analysointi

Mukautettujen mittareiden luominen on hyödytöntä, jos et analysoi dataa. Tähän on kaksi pääasiallista lähestymistapaa: paikallisesti kehityksen aikana ja aggregoituna tuotannossa.

Selaimen kehittäjätyökalujen käyttäminen

Nykyaikaisissa selaimissa, kuten Chromessa ja Firefoxissa, on erinomainen tuki User Timing -merkintöjen ja -mittausten visualisointiin niiden suorituskyvyn profilointityökaluissa.

1. Avaa selaimesi kehittäjätyökalut (F12 tai Ctrl+Shift+I).
2. Siirry Performance-välilehdelle.
3. Aloita profiilin nauhoitus ja suorita sitten sovelluksessasi toiminnot, jotka laukaisevat mukautetut merkintäsi ja mittauksesi.
4. Lopeta nauhoitus.

Aikajananäkymästä löydät erillisen rivin nimeltä Timings. Mukautetut merkintäsi näkyvät pystysuorina viivoina, ja mittauksesi näytetään värillisinä palkkeina, jotka osoittavat niiden keston. Niiden päälle viemällä hiiren osoitin paljastaa niiden nimet ja tarkat ajoitukset. Tämä on uskomattoman tehokas tapa debugata suorituskykyongelmia kehityksen aikana.

Datan lähettäminen analytiikka- ja RUM-palveluihin

Tuotannon seurantaa varten sinun on kerättävä tämä data käyttäjiltäsi ja lähetettävä se keskitettyyn paikkaan aggregointia ja analysointia varten. Tämä on keskeinen osa reaaliaikaista käyttäjäseurantaa (Real User Monitoring, RUM).

Yleinen työnkulku on:

1. Kerää suorituskykymittaukset, joista olet kiinnostunut.
2. Muotoile ne sopivaan muotoon (esim. JSON).
3. Lähetä data analytiikkapäätepisteeseen. Tämä voi olla kolmannen osapuolen palvelu, kuten Datadog, New Relic, Sentry tai jopa Google Analytics (mukautettujen tapahtumien kautta), tai oma hallitsemasi taustajärjestelmä.

            
function sendPerformanceData() {
  // Välitämme vain omista mukautetuista sovellusmittauksistamme
  const appMeasures = performance.getEntriesByType('measure').filter(
    (entry) => entry.name.startsWith('app:') // Käytä nimeämiskäytäntöä!
  );

  if (appMeasures.length > 0) {
    const payload = JSON.stringify(appMeasures.map(measure => ({
      name: measure.name,
      duration: measure.duration,
      startTime: measure.startTime,
      details: measure.detail, // Lähetä rikas kontekstimme
      path: window.location.pathname // Lisää enemmän kontekstia
    })));

    // Käytä navigator.sendBeacon luotettavaan, estämättömään datan lähetykseen
    navigator.sendBeacon('https://analytics.example.com/performance', payload);

    // Siivoa lähetetyt mittaukset
    appMeasures.forEach(measure => {
      performance.clearMeasures(measure.name);
      // Tyhjennä myös niihin liittyvät merkinnät
    });
  }
}

// Kutsu tätä funktiota sopivana ajankohtana, esim. kun sivu on poistumassa näkyvistä
window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    sendPerformanceData();
  }
});

            

              
                Copy
              
            
          

Edistyneet tekniikat ja parhaat käytännöt

Jotta voit todella hallita User Timing API:n, tarkastellaan joitakin edistyneitä ominaisuuksia ja parhaita käytäntöjä, jotka tekevät instrumentoinnistasi vankemman ja tehokkaamman.

`PerformanceObserverin` käyttö asynkroniseen seurantaan

`getEntries*()`-metodit vaativat, että haet manuaalisesti tietoja suorituskykypuskurista. Tällä on kaksi haittapuolta: saatat suorittaa tarkistuksen liian myöhään ja menettää tietueita, jos puskuri on täyttynyt ja tyhjennetty, ja itse hakeminen voi aiheuttaa pienen suorituskykykustannuksen. Nykyaikainen, suositeltava ratkaisu on `PerformanceObserver`.

`PerformanceObserver` antaa sinun tilata suorituskykytietueiden tapahtumia. Takaisinkutsufunktiotasi kutsutaan asynkronisesti aina, kun uusia tietueita niistä tyypeistä, joita tarkkailet, tallennetaan.

            
// 1. Luo takaisinkutsufunktio uusien tietueiden käsittelyyn
const observerCallback = (list) => {
  for (const entry of list.getEntries()) {
    console.log('Uusi mittaus havaittu:', entry.name, entry.duration);
    // Täällä voit heti lähettää tietueen analytiikkapalveluusi
    // ilman tarvetta hakea tietoja tai odottaa.
  }
};

// 2. Luo observer-instanssi
const observer = new PerformanceObserver(observerCallback);

// 3. Aloita 'mark'- ja 'measure'-tietuetyyppien tarkkailu
// 'buffered: true' -vaihtoehto varmistaa, että saat tietueet, jotka luotiin
// *ennen* kuin observer rekisteröitiin.
observer.observe({ entryTypes: ['mark', 'measure'], buffered: true });

// Nyt, aina kun performance.mark() tai performance.measure() kutsutaan missä tahansa
// sovelluksessasi, observerCallback laukeaa uudella tietueella.

// Lopeta tarkkailu myöhemmin:
// observer.disconnect();

            

              
                Copy
              
            
          

`PerformanceObserverin` käyttö on tehokkaampaa, luotettavampaa ja sen tulisi olla oletusvalintasi suorituskykydatan keräämiseen tuotantoympäristössä.

Luo selkeä nimeämiskäytäntö

Sovelluksesi kasvaessa keräät monia mukautettuja mittareita. Ilman johdonmukaista nimeämiskäytäntöä datastasi tulee vaikeasti suodatettavaa ja analysoitavaa. Ota käyttöön malli, joka tarjoaa kontekstia.

Hyvä käytäntö voisi olla: `[appName]:[featureOrComponent]:[eventName]:[status]`

• ecom:ProductGallery:render:start
• ecom:ProductGallery:render:end
• ecom:ProductGallery:render:duration
• admin:DataTable:fetchApi:start
• admin:DataTable:fetchApi:duration

Tämä rakenne tekee triviaaliksi suodattaa kaikki `ProductGallery`-komponenttiin liittyvät mittarit tai löytää kaikki `fetchApi`-kestot koko sovelluksesta.

Abstrahoi apupalveluksi

Johdonmukaisuuden varmistamiseksi ja toistuvan koodin vähentämiseksi kääri `performance`-kutsut omaan apumoduuliisi tai -palveluusi. Tämä tekee myös suorituskyvyn seurannan käyttöönotosta tai poistamisesta helppoa ympäristön perusteella.

            
// performance-service.js

const IS_PERFORMANCE_MONITORING_ENABLED = process.env.NODE_ENV === 'production' || window.location.search.includes('perf=true');

export const perfMark = (name, options) => {
  if (!IS_PERFORMANCE_MONITORING_ENABLED) return;
  performance.mark(name, options);
};

export const perfMeasure = (name, start, end) => {
  if (!IS_PERFORMANCE_MONITORING_ENABLED) return;
  performance.measure(name, start, end);
};

export const startJourney = (name) => {
  perfMark(`${name}:start`);
};

export const endJourney = (name) => {
  const startMark = `${name}:start`;
  const endMark = `${name}:end`;
  const measureName = `${name}:duration`;

  perfMark(endMark);
  perfMeasure(measureName, startMark, endMark);
  // Valinnaisesti tyhjennä merkinnät tässä
};

// Komponentissasi:
// import { startJourney, endJourney } from './performance-service';
// startJourney('ecom:checkout');
// ...myöhemmin...
// endJourney('ecom:checkout');

            

              
                Copy
              
            
          

Yhteenveto: Ota sovelluksesi suorituskykytarina hallintaasi

Vaikka standardimittarit, kuten Core Web Vitals, tarjoavat olennaisen terveystarkastuksen verkkosivustollesi, ne eivät valaise niiden ominaisuuksien ja vuorovaikutusten suorituskykyä, jotka tekevät sovelluksestasi ainutlaatuisen. User Timing API on silta, joka kuromme tämän kuilun umpeen. Se tarjoaa yksinkertaisen mutta syvällisen tehokkaan mekanismin mitata sitä, mikä todella merkitsee käyttäjillesi ja liiketoiminnallesi.

Toteuttamalla mukautettuja merkintöjä ja mittauksia muutat suorituskyvyn optimoinnin arvailupelistä dataan perustuvaksi tieteeksi. Voit paikantaa tarkat funktiot, komponentit tai käyttäjäkulut, jotka aiheuttavat pullonkauloja, vahvistaa uudelleenjärjestelyjesi vaikutuksen objektiivisilla numeroilla ja lopulta rakentaa nopeamman, nautittavamman kokemuksen maailmanlaajuiselle yleisöllesi.

Aloita pienestä. Tunnista sovelluksesi tärkein yksittäinen käyttäjäpolku – olipa se tuotteen etsiminen, lomakkeen lähettäminen tai datanäkymän lataaminen. Instrumentoi se `performance.mark()`- ja `performance.measure()`-metodeilla. Analysoi tulokset kehittäjätyökaluissasi. Kun näet sen tarjoaman selkeyden, saat valtuudet kertoa sovelluksesi koko suorituskykytarinan, yksi mukautettu mittari kerrallaan.